<template>
  <div class="home">
    <div class="head">
        <span v-if="userId!=0">欢迎【 {{user.nickName}} 】光临欢乐购!</span>
        <span v-if="userId==0">欢迎光临欢乐购</span>
        &nbsp;&nbsp;&nbsp;&nbsp;
        <el-button type="text" v-if="userId==0">注册</el-button>
        <el-button type="text" v-if="userId==0" @click="handleLogin">登录</el-button>
        <el-button type="text" v-if="userId!=0" @click="resetFormVisible=true">修改密码</el-button>
    </div>
    
    <!-- 重置密码对话框 -->
    <el-dialog title="重置密码" :visible.sync="resetFormVisible">
      <el-form :model="resetForm" :rules="resetRules" ref="resetForm">
        <el-form-item label="原密码" prop="oldPass" :label-width="formLabelWidth">
          <el-input type="password" v-model="resetForm.oldPass" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="新密码"  prop="newPass1" :label-width="formLabelWidth">
          <el-input type="password" v-model="resetForm.newPass1" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="确认密码"  prop="newPass2" :label-width="formLabelWidth">
          <el-input type="password" v-model="resetForm.newPass2" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="resetFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleResetPassword">确 定</el-button>
      </div>
    </el-dialog>
    
  </div>
</template>

<script>
// @ is an alias to /src
// import {userResetPassword} from '../api/api.js'
import {userResetPassword} from '@/api/api.js'
// import HelloWorld from '@/components/HelloWorld.vue'

export default {
    name: 'Home',
    data() {
        return {
            userId: 0,
            user: null,
            token: null,
            // 是否显示重置密码对话框
            resetFormVisible: false,
            formLabelWidth: '120px',
            resetForm: {
                oldPass: '',
                newPass1: '',
                newPass2: ''
            },
            resetRules: {
                oldPass: [
                    { required: true, message: '请输入原密码', trigger: 'blur' }
                ],
                newPass1: [
                    { required: true, message: '请输入新密码', trigger: 'blur' }
                ],
                newPass2: [
                    { required: true, message: '请输入确认密码', trigger: 'blur' }
                ],
            }
        }
    },
    mounted() {
        let token = window.sessionStorage.getItem('token')
        if(token != null) {
            let user = JSON.parse(window.sessionStorage.getItem('user'))
            this.token = token
            this.user = user
            this.userId = user.id
            console.log('mount', user);
        }
    },
    methods:{
        handleLogin() {
            this.$router.push('/login')
        },
        handleResetPassword() {
            this.$refs['resetForm'].validate((valid) => {
                if(valid) {
                    if(this.resetForm.newPass1 != this.resetForm.newPass2) {
                        this.$message.error("两次密码输入不一致，请重新填写！")
                        return false
                    }
                    // 修改密码
                    let param = {
                        oldPass: this.resetForm.oldPass,
                        newPass: this.resetForm.newPass1,
                        userId: this.userId
                    }
                    console.log('param', param);
                    userResetPassword(param).then(res => {
                        if(res.data.code == 200) {
                            this.$message.success("密码修改成功")
                            this.resetFormVisible = false
                        }
                        else {
                            this.$message.error("修改密码失败")
                        }
                    })
                }
                else {
                    this.$message.error("无法修改密码")
                    return false
                }
            })
        }
    }
}
</script>

<style>
    .head {
        width: 100%;
        height: auto;
        text-align: left;
    }
</style>